<template>
  <el-row style="height: 100%;" v-loading="loading" element-loading-text="拼命加载中">
    <el-col :span="18" style="height: 100%">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="6" class="login-right">
      <div class="box-card">
        <h2 class="tit">登录</h2>
        <el-form :model="LoginForm" :rules="rules" ref="Login">
          <!--账号框-->
          <el-form-item prop="userName">
            <el-input placeholder="请输入账号" v-model="LoginForm.userName" clearable></el-input>
          </el-form-item>
          <!--密码框-->
          <el-form-item prop="pwd">
            <el-input placeholder="请输入密码" v-model="LoginForm.pwd" clearable show-password></el-input>
          </el-form-item>
          <!--登录按钮-->
          <el-form-item>
            <el-button type="primary" @click="LoginOn">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: "Login",
    data(){
      return{
        LoginForm:{
          userName:'xxzx',//账号
          pwd:'18142006346',//密码
        },
        rules:{
          userName:[
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          pwd:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            {min:3,message: '密码不少于3个字符', trigger: 'blur' }
          ]
        },
        loading:false
      }
    },
    methods:{
      LoginOn(){
        this.$refs['Login'].validate((valid)=>{
          if (valid) {
            this.loading = true;
            this.$axios.login({
              "userName":this.LoginForm.userName,
              "pwd":this.LoginForm.pwd
            }).then(res=>{
              let time = setTimeout(()=>{
                //console.log(res);
                if (res.data.code==='0'){
                  sessionStorage.setItem('userId',res.data.data[0].userId);
                  sessionStorage.setItem('tabsList',JSON.stringify([{tit:'待处理文章',route:'/zlhwReadyList'}]));
                  this.$router.push('/Home');
                  this.loading = false;
                }
                clearTimeout(time);
              },500)
            }).catch(error=>{console.log(error);})
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .login-right{
    position: relative;
    background-color: #fff;
    z-index: 10;
  }
  .box-card{
    width: 300px;
    height: 400px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 150px;
    .tit{
      color: #505458;
      text-align: center;
      margin-bottom: 20px;
    }
    .el-button{
      margin-top: 20px;
      width: 100%;
      height: 40px;
    }
  }
  .bg-purple{
    height: 100%;
    background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3.ssl.cdn.btime.com%2Ft01eb6d7eb6c4b1e00a.jpg%3Fsize%3D2560x1440&refer=http%3A%2F%2Fp3.ssl.cdn.btime.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616902218&t=0880d5218e88ba90ea9bc9b7cd0f6e4d");
    background-size:100%;
    background-size: cover;
    background-repeat:no-repeat;
  }
</style>
